@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800&family=Noto+Naskh+Arabic:wght@400;600&family=Noto+Sans+Arabic:wght@100;200;300;400;500&family=Poppins:wght@200;300&display=swap");
/* font-family: 'Noto Naskh Arabic', serif; */
/* font-family: 'Noto Sans Arabic', sans-serif; */
/* font-family: 'Cairo', sans-serif; */

:root {
    /** color **/
    --white: #fff;
    --black: #000;
    --logo-pink: #ff0080;
    --pink_D1: #ffc8dd;
    --pink_D2: #ffafcc;
    --pink_D3: #e27396;
    --pink_D4: #ea9ab2;
    --pink_D5: #ff499e;
    --logo-blue: #009eff;
    --blue: #5b6cf9;
    --blue_D1: #bde0fe;
    --blue_D2: #a2d2ff;
    --blue_D3: #49b6ff;
    --blue_D4: #779be7;
    --logo-purple: #4a0a9e;
    --purple_D0: #fee2fe;
    --purple_D1: #efcfe3;
    --purple_D2: #cdb4db;
    --purple_D3: #a480cf;
    --purple_D4: #7723e4;
    --purple_D5: #6218c4b6;
    --purple_D6: #5b12bbd2;
    --grey-web: hsla(0, 0%, 50%);
    --grey_D1: #ccc;
    --grey_D2: #ddd;
    --grey_D3: #b6b6b6;
    --grey_D3: #666;
    --grey_D4: #494949;
    --Black_text-30: hsla(0, 0%, 0%, 0.3);
    --Black_text-50: hsla(0, 0%, 0%, 0.5);
    --black_D1: #1a1a1a;
    --black_D2: #1c1c1c;
    --black_D3: #131212;
    --black_D4: #121212;

    /** gradient**/
    --gradient_principe: linear-gradient(-90deg, #9d80cb 0%, #f7c2e6 100%);
    --gradient_2: linear-gradient(-90deg, #d4acfb 0%, #b84fce 100%);
    --gradient_3: linear-gradient(-90deg, #ea98da 0%, #5b6cf9 100%);
    --gradient_blue: linear-gradient(-90deg, #9fccfa 0%, #0974f1 100%);
    --gradient_blue1: linear-gradient(-90deg, #5c81f9 0%, #0974f1 100%);
    --gradient_pink: linear-gradient(-90deg, #f89999 0%, #f6c0ba 100%);
    --gradient-nav-1: linear-gradient(-90deg, #d8ded6 0%, #e8bdf9 100%);
    --gradient-nav-2: linear-gradient(-90deg, #e3e3e3 0%, #cad0ff 100%);

    /** typography**/
    --ff-nash: "Noto Naskh Arabic", serif;
    --ff-sans: "Noto Sans Arabic", sans-serif;
    --ff-cairo: "Cairo", sans-serif;

    --fs-1: 4.2rem;
    --fs-2: 3.2rem;
    --fs-3: 2.3rem;
    --fs-4: 1.8rem;
    --fs-5: 1.5rem;
    --fs-6: 1.4rem;
    --fs-7: 1.3rem;

    --fs-500: 500;
    --fs-600: 600;

    /** Spacing **/
    --section-padding: 75px;

    /** Shadow **/
    --shadow-1: 0 6px 15px 0 hsla(0, 0%, 0%, 0.05);
    --shadow-2: 0 10px 30px hsla(0, 0%, 0%, 0.06);
    --shadow-3: 0 10px 50px 0 hsla(220, 53%, 22%, 0.1);
    --shadow-4: 0 7px 23px rgba(0, 0, 0, 0.08);

    /** raduis **/
    --raduis-pill: 500px;
    --raduis-circle: 50%;
    --raduis-3: 3px;
    --raduis-5: 5px;
    --raduis-10: 10px;

    /** transition **/
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
    --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}
*::selection {
    background: var(--purple_D3);
    color: white;
}
body {
    font-family: var(--ff-cairo);
}
.box-area {
    width: 700px;
    /* margin-top: 100px; */
}

.left-box p {
    font-family: var(--ff-cairo);
    font-weight: 600;
    font-size: 16px;
    color: var(--purple_D4);
}
.left-box small {
    font-size: 12px;
    font-weight: 500;
    font-family: var(--ff-cairo);
    line-height: 25px;
}
/* Register Form  */
.right-box {
    background: white;
    padding: 30px 45px;
    border-radius: 10px;
}
.register-form {
    height: 100%;
    width: 100%;
    transition: var(--transition-2);
}
.register-form form {
    padding: 0.4rem 0.5rem;
}
.register-form .form-control,
.register-form .form-select {
    width: 100%;
    margin: 3px 0;
    border: none;
    border-bottom: 1px solid var(--grey_D1);
    font-size: 14px;
    color: #333;
    text-transform: none;
}
.register-form .form-control::placeholder {
    font-size: 14px;
    color: var(--grey_D3);
}
.register-form select {
    font-size: 14px !important;
}
.register-form .form-control option {
    padding: 20px 0;
    font-size: 14px;
    color: var(--grey_D4);
}

/* media  */
@media only screen and (max-width: 768px) {
    .box-area {
        margin: 90px 10px;
    }
    .right-box {
        padding: 20px;
    }

    .register-form {
        width: 100%;
    }
    .register-form .form-control,
    .register-form .form-select {
        margin: 10px 0;
        padding: 10px 15px;
        font-size: 14px;
    }
    .input-group .btn {
        padding: 12px;
    }
    .left-box {
        order: 1;
    }
    .right-box {
        order: 2;
    }
    .left-box p {
        font-size: 14px;
        padding-right: 10px;
    }
    .left-box .input-group {
        height: 90px !important;
        width: 90px !important;
    }
}
@media (max-width: 550px) {
    .box-area {
        margin: 80px 10px;
    }

    .left-box .input-group {
        height: 80px !important;
        width: 80px !important;
    }
    .left-box p {
        font-size: 13px;
        padding-right: 10px;
    }
    .left-box button i {
        font-size: 12px;
    }
    #p {
        margin-bottom: 10px;
    }
}